<template>
	<view>
		<u-navbar :title="title" :is-back="false" height="54" :border-bottom="false">
			<view style="width: 100%;">
				<u-tabs :list="list" font-size="35" :current="current" @change="change" ></u-tabs>
				 </view>
		</u-navbar>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				title: '',
				list: [{
					name: '推荐'
				}, {
					name: '男频'
				}, {
					name: '女频'
				}],
				current: 0,
			}
		},
		methods:{
			change(index) {
				this.current = index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		width: 100%;
		position: relative;
		text-align: center;
		.channel{
			width: 30%;
			margin:20rpx auto;
			display: flex;
			border: 1px solid #ed424b;
			border-radius: 8rpx;
			.txt{
				flex: 1;
				color: #ed424b;
				&.on{
					color: #fff;
					background-color: #ed424b;
				}
			}
		}
		.logo{
			position: absolute;
			left: 20rpx;
			top: 50%;
			margin-top: -20rpx;
			line-height: 40rpx;
		}
		.fa{
			position: absolute;
			top: 50%;
			margin-top: -20rpx;
			line-height: 40rpx;
			font-size: 40rpx;
			color: #ed424b;
		}
		.fa-user-o{
			right: 80rpx;
		}
		.fa-book{
			right: 20rpx;
		}
	}
</style>
